import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Router } from '@angular/router'
import { Observable } from 'rxjs';
import { AudioService } from '../services/audio.service';
import {TranslateService} from '@ngx-translate/core';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.less']
})
export class HomeComponent implements OnInit {
public banner:Array<any> = []
public hotList:Array<any> = []
public style:string = "scrollx"
public signInForm = {
  phone:'13011866600',
  password:'SHIjiale1018',
  isShow:true
}
public user:any = {
  nickname: '',
  backgroundImgIdStr: '',
  avatarUrl: '',
  signature: ''
}
public hotSearchList:Array<any> = []

public msg:any = '<div *ngIf="!signInForm.isShow" class="account"><h3 style="color: #fff;font-size: 20px;">个人信息</h3><img class="AccountImg" src={{user.avatarUrl}}><div class="AccountMsg">{{user.nickname}}<br>{user.signature}}</div><div (click)="logout">退出</div></div>'

public newSongs:Array<any> = []

public songUrl:string = ''
public url:string = ''
public timer:any
public minute:string = ''
public second:string = ''


  constructor(
    private http: HttpClient,
    private router: Router,
    private audioService: AudioService,
    public translateService: TranslateService
  ) { }
  

  ngOnInit(): void {
    this.getBanner();
    this.getHotList('');
    this.getHotSearch();
    this.getNewSong();
    this.audioService.getHotTopic();
  }

getBanner() {
  this.http.get("http://localhost:3000/banner").toPromise()
  .then((data:any) => {
    this.banner = data.banners
  })
  .catch((err:any) => {console.log('失败');
  })
  
}

getHotList(cat:any) {
  this.http.get(`http://localhost:3000/top/playlist?cat=${cat}`).toPromise()
  .then((data:any) => {
    this.hotList = data.playlists
    this.hotList=this.hotList.slice(0,12)
  })
  .catch((err:any) => {console.log('失败');
  })
}

setActive(e:any){
  const arr = document.querySelectorAll(".tagLi")
  for(var i = 0;i<arr.length;i++){
    arr[i].classList.remove("active")
  }
  e.target.classList.add("active")
}

//登录
signin(){
  this.http.get(`http://localhost:3000/login/cellphone?phone=${this.signInForm.phone}&password=${this.signInForm.password}`).toPromise()
  .then((data:any) => {
    this.user.avatarUrl = data.profile.avatarUrl
    this.user.nickname = data.profile.nickname
    this.user.backgroundImgIdStr = data.profile.backgroundImgIdStr
    this.user.signature = data.profile.signature
    console.log(this.user);
    this.signInForm.isShow=false
  })
  .catch((err:any) => {console.log('失败');
  })
}

logout(){
  this.http.get('http://localhost:3000/logout').toPromise()
  .then((data:any)=> {
    this.signInForm.isShow=true})
  .catch((err:any)=>{console.log('失败');
  })
}

getHotSearch(){
  this.http.get('http://localhost:3000/search/hot/detail').toPromise()
  .then((data:any)=> {
    this.hotSearchList = data.data.slice(0,10)
    console.log(this.hotSearchList);
    
  })
  .catch((err:any)=>{console.log('失败');
  })
}

gotoDt(id:any){
  this.http.get(`http://localhost:3000/playlist/detail?id=${id}`).toPromise()
  .then((data:any)=> {
    console.log(data);
    window.localStorage.setItem('playList',JSON.stringify(data.playlist))
    window.localStorage.setItem('songId',JSON.stringify(data.playlist.trackIds))
    this.router.navigate(['/dts']);
  })
  .catch((err:any)=>{console.log('失败');
  })
  
}

getNewSong(){
  this.http.get(`http://localhost:3000/top/song`).toPromise()
  .then((data:any)=> {
    this.newSongs = data.data.slice(0,20)
    console.log(this.newSongs);
    
  })
  .catch((err:any)=>{console.log('失败');
  })
}

playSong(id:number){
  console.log(id);
  this.http.get(`http://localhost:3000/song/url?id=${id}`).toPromise()
  .then((data:any)=> {
    console.log(data);
    
    window.localStorage.removeItem("songUrl")
    window.localStorage.setItem('songUrl',data.data[0].url)
  })
  .catch((err:any)=>{console.log('失败');
  })

  this.http.get(`http://localhost:3000/song/detail?ids=${id}`).toPromise()
  .then((data:any)=> {
    console.log(data);
    window.localStorage.removeItem("audioImgUrl")
    window.localStorage.setItem("audioImgUrl",data.songs[0].al.picUrl)
    window.localStorage.removeItem("audioName")
    window.localStorage.setItem("audioName",data.songs[0].name)
  })
  .catch((err:any)=>{console.log('失败');
  })
  
}

getSongUrl(){
  setTimeout(() => {
  this.url = window.localStorage.getItem("songUrl")||""
  const audioImg:any = document.querySelector('.audioImg')
  audioImg.src = window.localStorage.getItem('audioImgUrl')||''
  const audioName:any = document.querySelector('#audioName')
  audioName.value = window.localStorage.getItem('audioName')||''
  }, 1000);
  
}

play(){
setTimeout(() => {
  const mA:any = document.querySelector("#myAudio")
  const pT:any = document.querySelector("#playedTime")
  const done:any = document.querySelector(".done")

  mA.src=this.url
  if(mA.paused){
    mA.play();
      this.timer = setInterval(function(){
        let minute:any
        let second:any
        if(mA.currentTime<60){
          minute = "00"
          if(mA.currentTime<10){
            second = "0"+parseInt(mA.currentTime)
          }else
          second = parseInt(mA.currentTime)
        }
        else if(mA.currentTime>=60){
          minute = Math.floor(parseInt(mA.currentTime)/60)
          if(mA.currentTime%60<10){
            second = "0"+parseInt(mA.currentTime)%60
          }else
          second = parseInt(mA.currentTime)%60
        }
        done.style.width=(mA.currentTime/mA.duration)*100+"%"
        pT.value = minute+":"+second+"/"+"0"+Math.floor(parseInt(mA.duration)/60)+":"+parseInt(mA.duration)%60
      },1000)

}else{
    mA.pause();
    clearInterval(this.timer)
}
}, 1500);

}
}
